<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery练习2</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>
    <style>
        select{
            width: 100px;
            height: 140px;
        }
        div{
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>


    <script type="text/javascript">
        //页面加载完成
        $(function (){
            //第一个按钮【选中添加到右边】
            $("button:eq(0)").click(() => {
                //appendTo会将原本的元素进行删除    如果不想被删除 那么就要使用 .clone(true)
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            });

            //第二个按钮【全部添加右边】
            $("button:eq(1)").click(() => {
                $("select:eq(0) option").appendTo($("select:eq(1)"));
            });

            //第三个按钮 【选中删除到左边】
            $("button:eq(2)").click(() => {
                $("select:eq(1) option:checked").appendTo($("select:eq(0)"));
            });

            //第四个按钮【全部删除到左边】
            $("button:eq(3)").click(() => {
                $("select:eq(1) option").appendTo($("select:eq(0)"));
            });

        })
    </script>
</head>
<body>
    <div id="left">
        <select name="sel01" multiple="multiple">
            <option value="opt01">选项1</option>
            <option value="opt02">选项2</option>
            <option value="opt03">选项3</option>
            <option value="opt04">选项4</option>
            <option value="opt05">选项5</option>
            <option value="opt06">选项6</option>
            <option value="opt07">选项7</option>
            <option value="opt08">选项8</option>
        </select>

        <button>选中添加到右边</button>
        <button>全部添加到右边</button>
    </div>

    <div id="right">
        <select name="sel02" id="sel02" multiple>

        </select>
        <button>选中删除到左边</button>
        <button>全部删除到左边</button>
    </div>

</body>
</html>